<!DOCTYPE html>
<html lang="en">

<head>
    <!-- UTF-8编码 -->
    <meta charset="UTF-8">
    <!-- 适配移动端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no, minimal-ui">
    <!-- IE最高级渲染模式 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 关键词 -->
    <meta name="keywords" content="登录,后台,登录后台,后台模板,后台管理系统">
    <!-- 描述 -->
    <meta name="description" content="后台管理系统 - 登录">
    <!-- 标题 -->
    <title>后台管理系统 - 登录</title>
    <!-- 小图标 -->
    <link rel="icon" href="__STATIC__/admin/favicon.ico">
    <!-- Fontawesome, 初始化CSS, 私有CSS -->
    {css href="__STATIC__/admin/public/fontawesome/css/all.min.css, __STATIC__/admin/public/css/reset__MIN__.css, __STATIC__/admin/css/login__MIN__.css" /}
</head>

<body>
    <!-- 主题开始 -->
    <main id="login">
        <!-- 标题开始 -->
        <div class="login-title-wrap">
            <h4 class="login-title">后台管理系统 - 登录</h4>
        </div>
        <!-- 标题结束 -->

        <!-- 3D阴影开始 -->
        <div class="login-3d"></div>
        <!-- 3D阴影结束 -->

        <!-- 表单开始 -->
        <form class="login-form" action="" method="post" onsubmit="return false">
            <div class="login-form-item">
                <input id="name" class="login-form-item-input" type="text" name="name" placeholder="输入登录名" />
                <div class="login-form-icons">
                    <i class="far fa-times-circle"></i>
                    <i class="far fa-check-circle"></i>
                </div>
                <p class="login-form-prompt"></p>
            </div>
            <div class="login-form-item password">
                <input id="password" class="login-form-item-input" type="password" name="password" placeholder="输入密码" autocomplete="tel" />
                <div class="login-form-icons">
                    <i class="fas fa-eye" title="查看密码" onclick="togglePassword(this)"></i>
                    <i class="far fa-times-circle"></i>
                    <i class="far fa-check-circle"></i>
                </div>
                <p class="login-form-prompt"></p>
            </div>
            <div class="login-form-item verify">
                <input id="verify" class="login-form-item-input" type="text" name="verify" placeholder="输入验证码" />
                <div class="login-form-icons">
                    <i class="far fa-times-circle"></i>
                    <i class="far fa-check-circle"></i>
                </div>
                <img id="verify-img" class="login-form-item-img" src="{:Url('admin/Login/verify')}" alt="验证码" title="看不清？点击换一张" onclick="changeOne(this)" />
                <p class="login-form-prompt"></p>
            </div>
            <div class="login-form-item checkbox">
                <input id="remember" class="checkbox-input" type="checkbox" name="remember" value="remember" />
                <label class="checkbox-label">
                    <i class="fas fa-check"></i>
                </label>
                <label class="login-form-item-label" for="remember">两周内自动登录</label>
            </div>
            <div class="login-form-item">
                <button class="login-form-item-submit" type="submit" onclick="login(this, '{:Url('admin/Login/login')}', '{:Url('admin/Index/index')}')">登录</button>
            </div>
        </form>
        <!-- 表单结束 -->
    </main>
    <!-- 主题结束 -->

    <!-- 消息提示开始 -->
    <div id="message-wrap"></div>
    <!-- 消息提示结束 -->

    <!-- Babel, JQuery, Axios, Jsencrypt -->
    {js href="__STATIC__/admin/public/js/babel.min.js, __STATIC__/admin/public/js/polyfill.min.js, __STATIC__/admin/public/js/jquery-3.4.1.min.js, __STATIC__/admin/public/js/axios.min.js, __STATIC__/admin/public/js/jsencrypt.min.js" /}
    <!-- Ryan -->
    <script type="text/babel" src="__STATIC__/admin/public/js/ryan__MIN__.js"></script>
    <!-- 公共JS -->
    <script type="text/babel" src="__STATIC__/admin/public/js/common__MIN__.js"></script>
    <!-- 私有JS -->
    <script type="text/babel" src="__STATIC__/admin/js/login__MIN__.js"></script>
</body>

</html>